/**
 * Created by Administrator on 2017/2/27.
 */
var Input = require('../../../src/libs/input');
var Password = require('../../../src/libs/password');
var Button = require('../../../src/libs/button');
var HyperLink = require('../../../src/libs/hyperlink');
var FormItem = require('../../../src/libs/form-item');
var GetCode = require('../../../src/libs/get-code');
var Checkbox = require('../../../src/libs/checkbox');
var Success = require('../complex/registerResult');
function hasClass(elem, cls) {
    elem = elem || {};
    return new RegExp("\\b" + cls + "\\b").test(elem.className);
};
//添加样式
function addClass(elem, cls) {
    elem = elem || {};
    hasClass(elem, cls) || (elem.className += " " + cls);
    elem.className = elem.className.replace(/^\s|\s$/g, "").replace(/\s+/g, " ");
    return this;
};
//删除样式
function removeClass(elem, cls) {
    elem = elem || {};
    if (hasClass(elem, cls)) {
        elem.className = elem.className.replace(new RegExp("(\\s|^)" + cls + "(\\s|$)"), "");
    }
    return this;
};
var Root = React.createClass({
    getInitialState: function () {
        return{
            type:0,
            display:'block'
        }
    },
    getType:function (val) {
        this.setState({type:val});
        this.refs.input1.clearValue();
        this.refs.input2.clearValue();
        this.refs.msgDM.clearValue();
        this.refs.pswDM.clearValue();
        this.refs.pswDM2.clearValue();
        this.refs.tjDM.clearValue();
        PageDM.btn1.type = val;
        PageDM.typeToggle.onClick();
    },
    checkboxClick:function(v){
        PageDM.checkboxDM.setValue(v);
        PageDM.checkboxDM.onClick(v);
    },
    componentDidMount: function(){
        var _this = this;
        var PageDM = window.PageDM;
        UEventHub.on(PageDM.imgCode.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT,function(v){
            var _node = this.refs.imgcode;
            _node.setAttribute('src',v);
        }.bind(this));

        UEventHub.on('getcode',function(v){
            if(v == PageDM.getBtnCode){
                _this.refs.getcode.toCount();
            }
        }.bind(this));

        UEventHub.on('next',function (v) {
            if(v){
                ReactDOM.render(<Success pagedm={PageDM}/>,_this.refs.container);
            }
        })
        UEventHub.emit("pageLoad","hello world!");
    },
    render: function() {
        return (
            <div>
                <div className="container mod-reg"> <span className="angle angle-top"></span> <span className="angle angle-bottom"></span>
                    <div ref="container">
                        <div className="form">
                            <div className="reg-tab">
                                <ul ref = "type">
                                    <li className={this.state.type ? '': 'current'} onClick={function(){this.getType(0)}}><b>个人注册</b><span className="bg"></span></li>
                                    <li className={this.state.type ? 'current': ''}  onClick={function(){this.getType(1)}}><b>企业注册</b><span className="bg"></span></li>
                                    <div className="clear"></div>
                                </ul>
                            </div>
                            <div className="form-reg">
                                <FormItem ref="input1" label={PageDM.input1.label} id={PageDM.input1.id} dmbind={PageDM.input1.dmbind}>
                                    <Input className="ucs-input" name={PageDM.input1.name} placeholder="请输入手机号码" value={PageDM.input1.value} dmbind={PageDM.input1.dmbind}/>
                                </FormItem>
                                <FormItem ref="input2" label={PageDM.input2.label} dmbind={PageDM.input2.dmbind}>
                                    <Input id={PageDM.input2.id} className="ucs-input ucs-input-code" type="text" name={PageDM.input2.name} placeholder="请输入图形验证码" value={PageDM.input2.value} dmbind={PageDM.input2.dmbind}/>
                                    <a href="javascript:void (0)" onClick={PageDM.imgCode.onClick}>
                                        <img src={PageDM.imgCode.value} className="f-left img-code" ref="imgcode" style={{height:"40px"}}/>
                                    </a>
                                </FormItem>
                                <FormItem ref="msgDM" label={PageDM.msgDM.label} id={PageDM.msgDM.id} name={PageDM.msgDM.name} placeholder="请输入短信验证码" value={PageDM.msgDM.value} dmbind={PageDM.msgDM.dmbind}>
                                    <Input id={PageDM.msgDM.id} name={PageDM.msgDM.name} className="ucs-input ucs-input-code" placeholder="请输入短信验证码" value={PageDM.msgDM.value} dmbind={PageDM.msgDM.dmbind}/>
                                    <GetCode dmbind={PageDM.msgDM.dmbind} id={PageDM.getBtnCode.id} className="btn-code btn ucs-btn" ref="getcode" count={PageDM.getBtnCode.count} onClick={PageDM.getBtnCode.onClick}  onMouseDown={PageDM.getBtnCode.onMouseDown}/>
                                </FormItem>
                                <FormItem ref="pswDM" label={PageDM.pswDM.label} id={PageDM.pswDM.id} dmbind={PageDM.pswDM.dmbind}>
                                    <Password className="ucs-input" name={PageDM.pswDM.name} placeholder="请设置登录密码" value={PageDM.pswDM.value} dmbind={PageDM.pswDM.dmbind}/>
                                </FormItem>
                                <FormItem ref="pswDM2" label={PageDM.pswDM2.label} id={PageDM.pswDM2.id} dmbind={PageDM.pswDM2.dmbind}>
                                    <Password className="ucs-input" name={PageDM.pswDM2.name} placeholder="请再次输入登录密码" value={PageDM.pswDM2.value} dmbind={PageDM.pswDM2.dmbind}/>
                                </FormItem>
                                <FormItem ref="tjDM" label={PageDM.tjDM.label}  style={{display:this.state.type ? 'none' : 'block'}}  id={PageDM.tjDM.id} dmbind={PageDM.tjDM.dmbind}>
                                    <Input className="ucs-input" name={PageDM.tjDM.name} placeholder="请输入推荐码" value={PageDM.tjDM.value} dmbind={PageDM.tjDM.dmbind}/>
                                </FormItem>
                                <div className="ucs-form-group">
                                    <label>&nbsp;</label>
                                    <div className="input">
                                        <Checkbox value={PageDM.checkboxDM.value} ref="checkedbox" id={PageDM.checkboxDM.id} text="我已阅读并同意" onClick={this.checkboxClick} dmbind={PageDM.checkboxDM.dmbind} className="reg-checkbox"/>
                                        <a href={PageDM.URL.agreement.link} className="fc-link" target="_blank"> 《{PageDM.URL.agreement.name}》 </a>
                                    </div>
                                </div>
                                <div className="ucs-form-group auto-height">
                                    <label>&nbsp;</label>
                                    <div className="input">
                                        <Button value="注册" id={PageDM.btn1.id} className="btn-confirm btn btn-width" dmbind={PageDM.btn1.dmbind} onClick = {PageDM.btn1.onClick} onMouseDown={PageDM.btn1.onMouseDown} />
                                    </div>
                                </div>
                            </div>
                            <div className="clear"></div>
                        </div>
                        <div className="reg-login"> <span className="or">or</span>
                            <div className="txt">
                                <p>已有平台账号</p>
                                <p><a href={PageDM.URL.login} className="fc-link"> 直接登录<i className="icon-go iconfont"></i></a></p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));